<template>
  <div class="recommend">
    <!--:data="discList" v-show="!discList.length"-->
    <scroll  ref="scroll" class="recommend-content" :dataA="discList">
			<div> 
				<!-- 轮播图插件  scroll组件使用时 记得要嵌套一层父元素 -->
				<div class="slider-wrapper" v-if="recommends.length">
						<slider>
							<div v-for="item in recommends" :key="item.id" >
								<a :href="item.linkUrl">
										<img class="needsclick" :src="item.picUrl" alt="">
								</a>
							</div>
						</slider>	
			    </div>
				<div class="recommend-list">
					<div class="list-title">热门歌单推荐</div>
								<ul>
										<li @click="selectItem(item)" v-for="(item,index) in discList" class="item"  :key="index">
											<div class="icon">
												<img @load="loadimgage" width="60" height="60" v-lazy="item.imgurl">
											</div>
											<div class="text">
												<h2 class="name" v-html="item.creator.name"></h2>
												<p class="desc" v-html="item.dissname"></p>
											</div>
										</li>
								</ul>
				</div>
			
	    	</div>
				<!-- loading 延迟加载 -->
				<div class="loading-container"  v-show="!discList.length" >
					<loading></loading> 
				</div>
    </scroll>
   <router-view></router-view>
  </div>
</template>
<!-- 
LOAD事件是加载事件，当你窗体加载成功后就会触发的事件，比如说你想初始化某些属性就可以在LOAD事件内完成。
LOAD你可以看做是被动事件，不管你用不用，它都存在着。如果你不想用，事件里则不需要写任何代码。 
-->
<script>
import BScroll from 'better-scroll'
import loading from 'base/loading/loading';
import {getRecommend, getDiscList} from 'api/recommend';
import slider from 'base/slider/slider';
import {ERR_OK} from 'api/config'
import scroll from 'base/scroll/scroll'
import axios from 'axios'
import {playlistMixin} from 'common/js/mixin'
import {mapMutations} from 'vuex'

export default {
  name: 'recommend',
  data(){
	  return{
			recommends:[],
			discList:[]
	  }
  },
  components: { 
   loading,
	 slider,
	 scroll
	},
  created () {
	  this._getRecommend()
		this._getDiscList() 
},
methods: {
	     handlePlaylist(playlist) {
	        const bottom = playlist.length > 0 ? '60px' : ''
	        this.$refs.recommend.style.bottom = bottom
	        this.$refs.scroll.refresh()
	      },
				loadImage() {
					if (!this.checkloaded) {
						this.checkloaded = true
						this.$refs.scroll.refresh()
					}
				},
	 _getRecommend() {
        getRecommend().then((res) => { //封装了获取首页轮播图的请求方式
       if (res.code === ERR_OK) {
            this.recommends = res.data.slider
          }
        })
      },
			selectItem(item){
				this.$router.push({
					path: `/recommend/${item.dissid}`
				})
				console.log(item)
				this.setDisc(item)
			},
      _getDiscList() {//获取歌单下拉列表
        getDiscList().then((res) => {
          if (res.code === ERR_OK) {
							this.discList = res.data.list
          }else{
			  		console.log("---rebbbb----")
		      }
        })
      },
			loadimgage(){
				if(!this.checkLoaded){
					this.$refs.scroll.refresh()
				  this.checkLoaded=true;
				}
				
			},
			...mapMutations({
				setDisc: 'SET_DISC'
			})
}
}
</script>

<style lang="less"  scoped>
   @import "../../common/stylus/variable.less";
   .recommend{
   	  position: fixed;
   	  width: 100%;
   	  top: 88px;
   	  bottom: 0;
   	  .recommend-content{
   	  	height:100%;
   	  	overflow:hidden;
   	  	.slider-wrapper{
   	  		position: relative;
   	  		width: 100%;
   	  		overflow: hidden;
   	  	}
   	  	.recommend-list{
   	  		.list-title{
   	  			height: 65px;
   	  			line-height: 65px;
   	  			text-align: center;
   	  			font-size: @font-size-medium;
   	  			color: @color-theme;
   	  		}
   	  		.item{
   	  			 display: flex;
   	  			 box-sizing: border-box;
   	  			 align-items: center;
   	  			 padding: 0 20px 20px 20px;
   	  		}
   	  		.icon{
   	  			flex: 0 0 60px;
   	  			width: 60px;
   	  			padding-right: 20px;
   	  		}
   	  		.text{
   	  			display: flex;
   	  			flex-direction: column;
   	  			justify-content: center;
   	  			flex: 1;
   	  			line-height: 20px;
   	  			overflow: hidden;
   	  			font-size: @font-size-medium;
   	  			.name{
   	  				margin-bottom: 10px;
   	  				color: @color-text;
   	  			}
   	  			.desc{
   	  				color:@color-text-d;
   	  			}
   	  		}
   	  	}
   	  	.loading-container{
		    position: absolute;
		    width: 100%;
		    top: 50%;
		    transform: translateY(-50%);
		  	}
   	  }
   	
   }
   
</style>
